<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item
        :to="{ path: '/nursinghome/nursemain' }"
        class="breadCrumb"
        >首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>健康信息管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="normal-management-main">
      <div class="operater-bar">
        <!--输入和选择区域-->
        <div class="input-select-field">
          <div>
            <el-text class="mx-1">姓名：</el-text>
            <el-select
              v-model="valuen"
              clearable
              placeholder="选择老人"
              style="width: 240px"
            >
              <el-option
                v-for="item in nameoption"
                :key="item.eldId"
                :label="item.eldName"
                :value="item.eldId"
              />
            </el-select>
          </div>
          <div>
            <el-text class="mx-1">健康状态：</el-text>
            <el-select
              v-model="values"
              clearable
              placeholder="选择健康状况"
              style="width: 240px"
            >
              <el-option
                v-for="item in stateoption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <!--按钮区域-->
        <div class="btn-field">
          <el-button type="primary" @click="select()">搜索</el-button>
        </div>
      </div>
      <!-- 表格区域 -->
      <div class="table-field">
        <el-table :data="tableData" border stripe style="width: 100%">
          <el-table-column prop="eldId" label="ID" />
          <el-table-column prop="eldName" label="姓名" />
          <el-table-column prop="eldGender" label="性别" />
          <el-table-column prop="eldIdNum" label="身份证号" />
          <el-table-column prop="eldHealth" label="健康状况" />
          <el-table-column prop="operator" label="操作" width="240">
            <template #default="scope">
              <el-button
                type="primary"
                size="small"
                @click="toggleDialog(scope.row)"
              >
                详情
              </el-button>
              <el-button
                type="primary"
                size="small"
                @click="changeh(scope.row)"
              >
                修改
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>

  <!-- 详情事件对话框 -->
  <div>
    <el-dialog v-model="addDialogVisible">
      <h3 style="font-family: 'Microsoft YaHei', sans-serif; color: black">
        健康表
      </h3>

      <el-descriptions
        title="healthinfo"
        direction="vertical"
        :column="4"
        border
      >
        <el-descriptions-item label="姓名">{{
          healthInfo.eldName
        }}</el-descriptions-item>
        <el-descriptions-item label="健康信息编号">{{
          healthInfo.hfId
        }}</el-descriptions-item>
        <el-descriptions-item label="血常规情况">{{
          healthInfo.bloodrt
        }}</el-descriptions-item>
        <el-descriptions-item label="尿常规情况">{{
          healthInfo.urinert
        }}</el-descriptions-item>
        <el-descriptions-item label="肝功能情况">{{
          healthInfo.liverFunction
        }}</el-descriptions-item>
        <el-descriptions-item label="血压值（mm Hg）">{{
          healthInfo.bloodPressure
        }}</el-descriptions-item>
        <el-descriptions-item label="血脂值（mmol/L）">{{
          healthInfo.bloodLipids
        }}</el-descriptions-item>
        <el-descriptions-item label="血糖值（mg/dL）">{{
          healthInfo.bloodgLucose
        }}</el-descriptions-item>
        <el-descriptions-item label="体重值（kg）">{{
          healthInfo.weight
        }}</el-descriptions-item>
        <el-descriptions-item label="身高值(cm)">{{
          healthInfo.height
        }}</el-descriptions-item>
        <el-descriptions-item label="肾功能情况">{{
          healthInfo.renalFunction
        }}</el-descriptions-item>
        <el-descriptions-item label="备注信息">{{
          healthInfo.remarks
        }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{
          healthInfo.createTime
        }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{
          healthInfo.updataTime
        }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
  <el-dialog v-model="addDialogVisible2">
    <h2 style="font-family: 'Microsoft YaHei', sans-serif; color: black">
      健康表
    </h2>
    <h3 style="font-family: 'Microsoft YaHei', sans-serif; color: black">
      健康信息编号 {{ healthInfo.hfId }}
    </h3>
    <div class="hform">
      <el-form :model="healthInfo" label-width="auto" style="max-width: 500px">
        <el-form-item label="血常规情况：">
          <el-input v-model="healthInfo.bloodrt" class="inp" />
        </el-form-item>
        <el-form-item label="尿常规情况：">
          <el-input v-model="healthInfo.urinert" class="inp" />
        </el-form-item>
        <el-form-item label="肝功能情况：">
          <el-input v-model="healthInfo.liverFunction" class="inp" />
        </el-form-item>
        <el-form-item label="血压值（mm Hg）：">
          <el-input v-model="healthInfo.bloodPressure" class="inp" />
        </el-form-item>
        <el-form-item label="血脂值（mmol/L）">
          <el-input v-model="healthInfo.bloodLipids" class="inp" />
        </el-form-item>
        <el-form-item label="血糖值（mg/dL）">
          <el-input v-model="healthInfo.bloodgLucose" class="inp" />
        </el-form-item>
        <el-form-item label="体重值（kg）">
          <el-input v-model="healthInfo.weight" class="inp" />
        </el-form-item>
        <el-form-item label="身高值(cm)）">
          <el-input v-model="healthInfo.height" class="inp" />
        </el-form-item>
        <el-form-item label="肾功能情况">
          <el-input v-model="healthInfo.renalFunction" class="inp" />
        </el-form-item>
        <el-form-item label="备注信息">
          <el-input v-model="healthInfo.remarks" class="inp" />
        </el-form-item>
      </el-form>
    </div>

    <div class="dia-bt">
      <el-button type="primary" class="bu2" @click="changehealth()"
        >提交</el-button
      >
      <el-button type="primary" class="bu2" @click="addDialogVisible2 = false"
        >取消</el-button
      >
    </div>
  </el-dialog>
</template>

<script setup>
import { ArrowRight, Plus, CirclePlusFilled } from "@element-plus/icons-vue";
import { ElButton, ElDialog } from "element-plus";
import { ref, reactive, onMounted } from "vue";
import { useStore } from "vuex";
import { computed } from "vue";
import * as nurse from "../../api/nurse.js";
import * as user from "../../api/user.js";
// 获取护理人员Id
const store = useStore();
const getUsername = computed(() => store.getters.getUsername);
let nurseId = ref();
const findnuser = async () => {
  const params = reactive({
    nurseno: getUsername,
  });
  await nurse.getNurseByUsernameAPI(params).then((reps) => {
    if (reps.data.code != 2000) {
      console.log("请求错误");
    } else {
      nurseId.value = reps.data.data[0].nurseId;
      //console.log(nurseId.value);
      findeld(1);

      /**/
    }
  });
};
const findeld = (sign) => {
  const params2 = ref({
    nurseId: nurseId.value,
    eldId: valuen.value,
    eldHealth: values.value,
  });
  //console.log(params2.value);
  user.getElderByNurseAPI(params2.value).then((reps) => {
    if (reps.data.code != 2000) {
      console.log("请求错误");
    } else {
      tableData.value = reps.data.data.map((item) => ({
        eldId: item.eldId,
        eldName: item.eldName,
        eldGender: item.eldGender,
        eldAge: item.eldAge,
        eldIdNum: item.eldIdNum,
        eldHealth: item.eldHealth === true ? "健康" : "亚健康",
      }));
      if (sign == 1) {
        nameoption.value = tableData.value;
      }
      console.log(tableData.value);
    }
  });
};
// 初始化数据
const valuen = ref();
const values = ref();
const select = () => {
  findeld(2);
  //console.log(valuen);
  //console.log(values);
};

const nameoption = ref([]);
const stateoption = ref([
  {
    value: true,
    label: "健康",
  },
  {
    value: false,
    label: "亚健康",
  },
]);
const healthInfo = ref({
  eldName: "",
  hfId: "",
  eldId: "",
  bloodrt: "",
  urinert: "",
  liverFunction: "",
  bloodPressure: "",
  bloodLipids: "",
  bloodgLucose: "",
  weight: "",
  height: "",
  renalFunction: "",
  remarks: "",
  createTime: "2024-06-19 10:00:00",
  updateTime: "2024-06-19 11:00:00" /**/,
});
// 定义响应式变量控制对话框的显示
const addDialogVisible = ref(false);
const addDialogVisible2 = ref(false);
// 定义方法来切换对话框的显示状态
const toggleDialog = (row) => {
  addDialogVisible.value = !addDialogVisible.value;
  const params = ref({
    elderId: row.eldId,
  });
  user.getHealthAPI(params.value).then((reps) => {
    if (reps.data.code != 2000) {
      console.log("请求错误");
    } else {
      healthInfo.value.eldName = row.eldName;
      healthInfo.value.hfId = reps.data.data.hfId;
      healthInfo.value.bloodrt = reps.data.data.bloodrt;
      healthInfo.value.urinert = reps.data.data.urinert;
      healthInfo.value.liverFunction = reps.data.data.liverFunction;
      healthInfo.value.bloodPressure = reps.data.data.bloodPressure;
      healthInfo.value.bloodLipids = reps.data.data.bloodLipids;
      healthInfo.value.bloodgLucose = reps.data.data.bloodgLucose;
      healthInfo.value.weight = reps.data.data.weight;
      healthInfo.value.height = reps.data.data.height;
      healthInfo.value.renalFunction = reps.data.data.renalFunction;
      healthInfo.value.remarks = reps.data.data.remarks;
      healthInfo.value.createTime = reps.data.data.createTime;
      healthInfo.value.updateTime = reps.data.data.updateTime;
      //healthInfo.value = reps.data.data[0];
      console.log(reps.data.data);
    }
  });
  return {
    addDialogVisible,
  };
};
let eldname = ref();
// 打开修改弹窗
const changeh = (row) => {
  addDialogVisible2.value = !addDialogVisible2.value;
  const params = ref({
    elderId: row.eldId,
  });
  user.getHealthAPI(params.value).then((reps) => {
    if (reps.data.code != 2000) {
      console.log("请求错误");
    } else {
      eldname.value = row.eldName;
      healthInfo.value = reps.data.data;
      //console.log(healthInfo.value);
    }
  });
  return {
    addDialogVisible,
  };
};
// 提交健康信息修改
const changehealth = () => {
  const data = reactive({
    hfId: healthInfo.value.hfId,
    bloodrt: healthInfo.value.bloodrt,
    urinert: healthInfo.value.urinert,
    liverFunction: healthInfo.value.liverFunction,
    bloodPressure: healthInfo.value.bloodPressure,
    bloodLipids: healthInfo.value.bloodLipids,
    bloodgLucose: healthInfo.value.bloodgLucose,
    weight: healthInfo.value.weight,
    height: healthInfo.value.height,
    renalFunction: healthInfo.value.renalFunction,
    remarks: healthInfo.value.remarks,
  });
  user.modifyHealthAPI(data).then((resp) => {
    if (resp.data.code !== 2000) {
      ElMessage({
        type: "error",
        message: resp.data.message,
      });
      return;
    }
    ElMessage({
      type: "success",
      message: resp.data.message,
    });
    addDialogVisible2.value = !addDialogVisible2.value;
  });
};

// 将需要在模板中使用的响应式变量和方法返回
//console.log(nurseId.value);
const tableData = ref([]);

onMounted(() => {
  findnuser();
});
</script>

<style lang="less" scoped>
.el-breadcrumb {
  margin-bottom: 15px;
}

.normal-management-main {
  width: 1175px;
  height: 575px;
}

.operater-bar {
  width: 100%;
  flex-direction: row;
  display: flex;
}

.input-select-field {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  width: 750px;
}

.table-field {
  width: 100%;
  margin-top: 15px;
}

.el-input {
  width: 150px;
}

.el-select {
  width: 150px;
}

.btn-field {
  width: 350px;
  display: flex;
  justify-content: flex-end;

  > .el-button {
    margin-left: 10px;
    margin-right: 10px;
  }
}
.hform {
  display: flex;
  justify-content: center;
  align-items: center;
}
.dia-bt {
  display: flex;
  justify-content: center;
  align-items: center;
  .bu2 {
    margin-top: 12px;
    margin-left: 55px;
    margin-right: 55px;
  }
}
</style>
